{include file="public/head"}

<body>
<div id="wrapper">

    <div class="gray-bg dashbard-1">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="row">
                            <div class="col-sm-3 m-b-xs"></div>

                            <div class="col-sm-3 m-b-xs"></div>
                            <div class="col-sm-3 m-b-xs"></div>

                            <div class="col-sm-3 m-b-xs">
                                <div class="row">
                                    <div class="col-sm-2 m-b-xs"></div>
                                    <div class="col-sm-10 m-b-xs">
                                        <!--                                                <button class="btn btn-sm btn-primary" type="submit" id="search"><i class="fa fa-search"></i> 搜索</button>-->
                                        <a href="{:url('User/NetMap')}" class="btn btn-sm btn-primary">返回顶部</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="tree" style="float: left">
                            <ul>
                                <li>
                                    <a href="{:url('User/NetMap',['username'=>$p_info['username'],'contact_num'=>$p_info['user_num']])}">
                                        <p>用户名：{$p_info.username|default="空位"}</p>
                                        <p>等级：{$p_info.level}</p>
                                        <p>投资：{$p_info.user_num|default="0"}次</p>
                                    </a>
                                    <ul>
                                        <li>
                                            <a href="{:url('User/NetMap',['username'=>$level_second_l['username'],'contact_num'=>$level_second_l['user_num']])}">
                                                <p>用户名：{$level_second_l.username|default="空位"}</p>
                                                <p>等级：{$level_second_l.level}</p>
                                                <p>投资：{$level_second_l.user_num|default="0"}次</p>
                                            </a>
                                            <ul>
                                                <li>
                                                    <ul>
                                                        <li>
                                                            <a href="{:url('User/NetMap',['username'=>$level_third_l1['username'],'contact_num'=>$level_third_l1['user_num']])}">
                                                                <p>用户名：{$level_third_l1.username|default="空位"}</p>
                                                                <p>等级：{$level_third_l1.level}</p>
                                                                <p>投资：{$level_third_l1.user_num|default="0"}次</p>
                                                            </a>
                                                        </li>
                                                            <!--<li>-->
                                                            <!--&lt;!&ndash;<a href="#">Grant child</a>&ndash;&gt;-->
                                                            <!--</li>-->
                                                        <li>
                                                            <a href="{:url('User/NetMap',['username'=>$level_third_r1['username'],'contact_num'=>$level_third_r1['user_num']])}">
                                                                <p>用户名：{$level_third_r1.username|default="空位"}</p>
                                                                <p>等级：{$level_third_r1.level}</p>
                                                                <p>投资：{$level_third_r1.user_num|default="0"}次</p>
                                                            </a>
                                                        </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="{:url('User/NetMap',['username'=>$level_second_r['username'],'contact_num'=>$level_second_r['user_num']])}">
                                                    <p>用户名：{$level_second_r.username|default="空位"}</p>
                                                    <p>等级：{$level_second_r.level}</p>
                                                    <p>投资：{$level_second_r.user_num|default="0"}次</p>
                                                </a>
                                                <ul>
                                                    <li>
                                                        <ul>
                                                            <li>
                                                                <a href="{:url('User/NetMap',['username'=>$level_third_l2['username'],'contact_num'=>$level_third_l2['user_num']])}">
                                                                    <p>用户名：{$level_third_l2.username|default="空位"}</p>
                                                                    <p>等级：{$level_third_l2.level}</p>
                                                                    <p>投资：{$level_third_l2.user_num|default="0"}次</p>
                                                                </a>
                                                            </li>
                                                            <!--<li>-->
                                                            <!--<a href="#">-->
                                                            <!--<p>asdadas</p>-->
                                                            <!--<p>adasdasd</p>-->
                                                            <!--<p>sadsadsadas</p>-->
                                                            <!--</a>-->
                                                            <!--</li>-->
                                                            <li>
                                                                <a href="{:url('User/NetMap',['username'=>$level_third_r2['username'],'contact_num'=>$level_third_r2['user_num']])}">
                                                                    <p>用户名：{$level_third_r2.username|default="空位"}</p>
                                                                    <p>等级：{$level_third_r2.level}</p>
                                                                    <p>投资：{$level_third_r2.user_num|default="0"}次</p>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tree{
            width: 100%;
        }

        .tree ul {
            padding-top: 20px;
            position: relative;
            webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            transition: all .3s;
        }

        .tree li {
            float: left;
            list-style: none;
            text-align: center;
            position: relative;
            padding: 20px 5px 0 5px;
            webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            transition: all .3s;
        }

        /*利用::before,::after作分支线*/
        .tree li::before,
        .tree li::after {
            content: "";
            position: absolute;
            top: 0;
            right: 50%;
            width: 50%;
            height: 20px;
            border-top: 1px solid #ccc;
        }

        .tree li:after {
            right: auto;
            left: 50%;
            border-left: 1px solid #ccc;
        }

        .tree li:first-child::before,
        .tree li:last-child::after {
            border: 0 none;
        }

        .tree li:last-child::before {
            border-right: 1px solid #ccc;
            -webkit-border-radius: 0 10px 0 0;
            -moz-border-radius: 0 10px 0 0;
            border-radius: 0 10px 0 0;
        }

        .tree li:first-child::after {
            -webkit-border-radius: 10px 0 0 0;
            -moz-border-radius: 10px 0 0 0;
            border-radius: 10px 0 0 0;
        }

        /*删除仅只有一个分支的分支线*/
        .tree li:only-child::before,
        .tree li:only-child::after {
            border: none;
        }

        .tree li:only-child {
            padding-top: 0;
        }

        /*添加仅只有一个分支的下分支线*/
        .tree ul ul::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            border-left: 1px solid #ccc;
            width: 0;
            height: 20px;
        }

        .tree a {
            line-height: 2;
            width: 200px;
            height: 200px;
            display: inline-block;
            border: 1px solid #ccc;
            padding: 5px 10px;
            box-sizing: border-box;
            color: #666;
            text-decoration: none;
            padding: 10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            transition: all .3s;
        }

        /*添加选中状态*/
        .tree li a:hover,
        .tree li a:hover+ul li a {
            background-color: #c8e4f8;
            color: #000;
            border: 1px solid #94a0b4;
        }

        .tree li a:hover+ul li:after,
        .tree li a:hover+ul li:before,
        .tree li a:hover+ul::before,
        .tree li a:hover+ul ul::before {
            border-color: #94a0b4;
        }
    </style>
</div>
<script src="__STATIC__/Admin/js/jquery-2.1.1.min.js"></script>
<script src="__STATIC__/Admin/js/bootstrap.min.js?v=3.4.0"></script>
<script src="__STATIC__/Admin/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="__STATIC__/Admin/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="__STATIC__/Admin/layer/layer.js"></script>

</body>

</html>